/*封装chart*/

var  gridPos={
    left:30,
    top:60,
    right:30,
    bottom:30
};

var  productPos={
    left:0,
    top:0,
    right:0,
    bottom:20
};

var tooltip={
    show:true,
    trigger: 'axis',
    // position: function (point, params, dom, rect, size) {
    //     // 固定在顶部
    //     return [point[0]-20,30];
    // },
    confine:true,
    borderWidth:1,
    alwaysShowContent:true,
    triggerOn:'mousemove|click',
    enterable:false,
    backgroundColor: 'rgba(50,50,50,0)',
    borderColor:'rgba(50,50,50,0)',
    // formatter: function(val,data){//用来显示tooltip的内容
    //     //console.log(val);
    //     //console.log(data);
    //     //var index=val[0]['dataIndex'];
    //     //console.log(val[0])
    //     var value=val[0]['axisValue'];
    //     //console.log(val);
    //     // if(data1[index]){
    //     //  var time=data1[index][0];
    //     //  //$(val[0].marker).html(1);
    //     //  //console.log(val[0].marker);
    //     //  return time;
    //     // }
    //     return value;
        
    // },
    axisPointer:{
        type: 'line',
        snap:true,
        z:1,
        lineStyle:{
            color:'#b0e9fd',
            type:'dashed'
        },
        label:{
            show:false,
            textStyle:{
                //color:'#ccc',
                //backgroundColor:'origin'
            },
            backgroundColor:'#000'
        }
    },
    //extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
};

function Chart(chartId,config){
    this.config=config || {};
    //this.chart=echarts.dispose(document.getElementById(chartId));
    this.chart=echarts.init(document.getElementById(chartId));
    var option={
        title: {
            text: '异步加载',
            show:false
        },
        tooltip: tooltip,
        legend: {
            data:[]
        },
        animation:true,
        animationEasing:'linear',
        progressive:50,
        xAxis: this.setX(),
        grid:gridPos,
        yAxis:this.loadY(),
        series: this.loadSeries(config.data),
        color:['#c23531','#b0e9fe', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
    };
    this.loadingConfig={
      text: '',
      color: '#b0e9fe',
      textColor:'#000',
      maskColor:'rgba(255, 255, 255, 0)',
      zlevel: 0
    };
    this.chart.setOption(option);
    this.chart.setOption(config.baseOption || {});
    this.LoadingShow();
}

Chart.prototype={
    constructor:Chart,
    LoadingShow:function(){
        this.chart.showLoading(this.loadingConfig);
    },
    LoadingHide:function(){
        this.chart.hideLoading();
    },
    showTip:function(name,data){
        //console.log(this.chart)
        this.chart.dispatchAction({
            type: 'showTip',
            // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
            seriesIndex: 0,
            // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
            dataIndex:data.length-1,
            // 可选，数据名称，在有 dataIndex 的时候忽略
            name: name,
            // 本次显示 tooltip 的位置。只在本次 action 中生效。
            // 缺省则使用 option 中定义的 tooltip 位置。
        //position: Array.<number>|string|Function,
        })
    },
    loadX:function(dataX,arg){
        if(arg=='h'){
            this.chart.setOption({
                xAxis:{
                    //type:'time',
                    data:dataX.map(function (item) {
                        var date = new Date(Number(item)); 
                        var arr=[toDou(date.getHours())];
                        
                        return arr[0];
                    }),
                },
            })

        }else if(arg=='mdhm'){
            this.chart.setOption({
                xAxis:{
                    //type:'time',
                    data:dataX.map(function (item) {
                        var date = new Date(Number(item));
                        var arrDay=[toDou(date.getMonth()+1),toDou(date.getDate())];
                        var arr=[toDou(date.getHours()),toDou(date.getMinutes())];
                        return arrDay.join('-')+' '+arr.join(':');
                    })
                }
            })
        }else{
            this.chart.setOption({
                xAxis:{
                    //type:'time',
                    data:dataX.map(function (item) {
                        var date = new Date(Number(item)); 
                        var arr=[toDou(date.getHours()),toDou(date.getMinutes())];
                        return arr.join(':');
                    }),
                },
            })
        }
        
    },
    loadY:function(){
        return  [
                {
                    splitLine: {
                        show: false
                    },
                    axisLabel:{
                        show:true,
                        inside:false,
                        align:'left',
                        color:'#b0e9fe',
                        fontSize:12,
                        margin:8
                        // formatter:function (value, index) {
                        //    var val=Math.floor(value/Math.pow(10,5));
                        //    return val;
                        // }
                    },
                    type:'value',
                    //name:'',//this.config.title ||'X10⁵',
                    nameTextStyle:{
                        color:'#b0e9fe',
                        fontSize:12,
                        align:'right',
                        padding:[3, 4, 5, 6]
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#b0e9fe'

                        }
                    },
                    axisTick:{
                        inside:true
                    }
                },{
                    splitLine: {
                        show: false
                    },
                    axisLabel:{
                        show:true,
                        inside:false,
                        align:'right',
                        color:'#b0e9fe',
                        fontSize:12,
                        formatter:function (value, index) {
                           return value;
                        }
                    },
                    type:'value',
                    name:'放散开度',
                    nameTextStyle:{
                        color:'#d31d11',
                        fontSize:12,
                        align:'center',
                        padding: [10, 4]
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#d31d11',

                        }
                    },
                    axisTick:{
                        inside:true
                    },
                    show:this.config.line || false
                }
                ]
    },
    setX:function(){
        var json={
            name: 'prediction',
            data: [],
            nameTextStyle:{
                color:'transparent'
            },
            axisLine:{
                show:true,
                lineStyle:{
                    color:'#b0e9fe'
                }
            },
            axisLabel:{
                align:'center', 
                inside:false
            },
            axisTick:{
                inside:true,
                alignWithLabel:true

            }
        };
        return json; 
    },
    loadSeries:function(data){
        var series=[];
        for(var i=0;i<data.length;i++){
            series[i]={};
            series[i].name=data[i].name;
            series[i].type=data[i].type;
            series[i].yAxisIndex=data[i].yAxisIndex || 0;
            series[i].stack = '总量';
            series[i].lineStyle={
                normal:{
                    type:data[i].lineStyle,
                    color:data[i].color
                }
            };
            series[i].areaStyle=data[i].areaStyle;
            series[i].showSymbol=false;
            series[i].smooth=data[i].smooth;
            series[i].barWidth=data[i].barWidth;
            series[i].barGap=data[i].barGap;
            series[i].stack=data[i].stack;
            series[i].label=data[i].label;
            series[i].itemStyle=data[i].itemStyle;
            series[i].data=[];
        }
        return series;
    },
    loadData:function(name,data){
        this.LoadingHide();
        this.chart.setOption({
            series:[{
                name:name,
                data:data,
            }]
        })
    },
    loadDataId:function(name,id,data){
        this.LoadingHide();
        this.chart.setOption({
            series:[{
                id:id,
                name:name,
                data:data,
                type:'line',
                lineStyle:'dotted',
            }]
        })
    },
    loadMarkline:function(data){
        this.chart.setOption({
            type:'line',
            series:[{
                name:'温度',
                type:'line',
                visualMap: {
                    top: 10,
                    right: 10,
                    splitNumber:2,
                    showLabel:false,
                    show:false
                },
                markLine:{
                    silent: true,
                    symbol:'',
                    data: data,
                    lineStyle:{
                        normal:{
                            width:3,
                            color:'#FF0000',
                            type:'dotted'
                        }
                    },
                    animationDuration:0,
                    label:{
                        normal:{
                            show:false
                        }
                    }
                }
            }]
        })
    },
    loadBaseLine:function(name,config){
        var data=config.data || {};
        var show=config.show || true;
        this.chart.setOption({
            visualMap: {
                top: 10,
                right: 10,
                splitNumber:2,
                showLabel:false,
                show:false,
                pieces: [{
                    gt:data.minVal || 0,
                    lte: data.maxVal || 0,
                    color: '#00c5f6'
                }, {
                    gt: data.maxVal,
                    color: '#d31d11'
                }],
                outOfRange: {
                    color: '#d31d11'
                }
            },
            series:[{
                name:name,
                type:'line',
                markLine:{
                    show:show,
                    symbol:'',
                    silent: true,
                    data: [{
                            name: '最小值',
                            yAxis: data.minVal || 0
                        },
                        {
                            name: '最大值',
                            yAxis: data.maxVal || 0
                        }],
                    lineStyle:{
                        normal:{
                            color:'#078d1c',
                            type:'dotted'
                        }
                    },
                    label:{
                        normal:{
                            show:false
                        }
                    }
                }
            }]
        })
    },
    loadCurrentTime:function(name,data){
        this.chart.setOption({
            series:[{
                name:name,
                type:'line',
                markLine:{
                    data:[{
                        name:'当前时间',
                        data:data
                    }],
                    lineStyle:{
                        normal:{
                            color:'#b0e9fe',
                            type:'solid'
                        }
                    }
                }
            }]
        });
    },
    loadRange:function(data){
        this.chart.setOption({
           yAxis:{
             min:data.min,
             max:data.max
           } 
        })
    }
}


//柱状图
function Bar(id,config){
    this.config=config || {};
    this.chart=echarts.init(document.getElementById(id));
    var option = {
        title: {
            text: ''
        },
        tooltip: {},
        legend: {
            data:[]
        },
        xAxis: {
            data: []
        },
        yAxis: {

        },
        series: []
    };
    this.loadingConfig={
      text: '',
      color: '#b0e9fe',
      textColor:'#000',
      maskColor:'rgba(255, 255, 255, 0)',
      zlevel: 0
    };
    this.LoadingShow();
    this.chart.setOption(option);
    this.chart.setOption(config.baseOption || {});
}

Bar.prototype={
    constructor:Bar,
    LoadingShow:function(){
        this.chart.showLoading(this.loadingConfig);
    },
    LoadingHide:function(){
        this.chart.hideLoading();
    },
    loadData:function(name,dataY){
        this.LoadingHide();
        this.chart.setOption({
            series: [{
                name: name,
                type: 'bar',
                data: dataY,
                //barWidth:,
                // itemStyle:{
                //     normal:{
                //         color:'rgba(0,196,246,0.65)',
                //         borderColor:'rgb(0,196,246)',
                //         borderWidth:1

                //     }
                // }
                
            }]
        })
    },
    loadX:function(dataX){
        this.chart.setOption({
            xAxis: {
                data: dataX
            } 
        })
    },
    loadBaseLine:function(name,data){
        this.chart.setOption({
            series:[{
                name:name,
                markLine:{
                    show:true,
                    symbol:'',
                    silent: true,
                    data: [
                        {
                            name: '最大值',
                            yAxis:data
                        }],
                    lineStyle:{
                        normal:{
                            color:'#078d1c',
                            type:'dotted'
                        }
                    },
                    label:{
                        normal:{
                            show:false
                        }
                    }
                }
            }]
        })
    }
}
























